<template>
	<view class="Editor">
		<statusBar />
		<!-- 设置 -->
		<view class="nav" @tap="leftIndex">
			<image src="../../static/setup/jiantou.png" mode=""></image>
			<view>商品-编辑</view>
		</view>
		<!-- 基本信息 -->
		<view class="search">
			<view>基本信息</view>
			<!-- 商品图片 -->
			<view>
				<view>商品图片</view>
				<view @tap="upload">
					<image :src="JSONstatus.icon" mode=""></image>
					<view>主图</view>
				</view>
			</view>

			<!-- 商品名称 -->
			<view>
				<view>商品名称</view>
				<view>{{ JSONstatus.name }}</view>
			</view>

			<!-- 商品描述 -->
			<view>
				<view>商品描述</view>
				<input type="text" v-model="JSONstatus.body" value="" placeholder="选填，300字以内" maxlength="300" />
			</view>

			<!-- 商品标签 -->
			<view @tap="labels">
				<view>商品标签</view>
				<view><input v-model="JSONstatus.labelName" type="text" value="" placeholder="必填，可提升搜索曝光" /></view>
				<image src="../../static/management/jiantou3.png" mode=""></image>
			</view>

			<!-- 商品特色 -->
			<!-- <view class="Commodity" @tap="characteristics">
				<view>商品特色</view>
				<view style="width: 100upx;" v-for="(item, index) in dishes" :key="index">{{ item }}</view>
				<image src="../../static/management/jiantou3.png" mode=""></image>
			</view> -->
			<!-- 店内分类 -->
			<!-- <view class="Commodity" @tap="handleTap">
				<view>店内分类</view>
				<view>{{ Classification }}</view>
				<image src="../../static/management/jiantou3.png" mode=""></image>
			</view> -->

			<!-- 商品规格 -->
			<view class="Product">商品规格</view>
			<view class="cup">
				<!-- 没有数据 -->
				<view class="nocup" v-if="this.JSONstatus.isSpecs == 2">
					<image src="../../static/management/xinjian.png" mode=""></image>
					<view>添加商品</view>
				</view>
				<!-- 循环 -->
				<view v-else class="cup_one" v-for="(item, index) in specesData" :key="index">
					<view>
						<view>
							{{ item.specsName }}
							<text>{{ item.SalesPrice }}元</text>
						</view>
						<view>库存 {{ item.SalesStock }}</view>
					</view>
					<view>
						<view>沽清</view>
						<view>置满</view>
					</view>
				</view>
				<view @tap="specifications" class="Manage">管理商品规格</view>
			</view>

			<!-- 手动输入规格 -->
			<view class="cup" v-if="type == 1">
				<!-- 价格 -->
				<view class="cup_two">
					<view class="plice">
						<view>价格</view>
						<view><input type="text" value="" placeholder="请填写" /></view>
						<view>元</view>
					</view>

					<!-- 餐盒费 -->
					<view class="plice">
						<view>餐盒费</view>
						<view><input style="margin-left: 105upx;" type="text" value="" placeholder="0.00" /></view>
						<view>元</view>
					</view>

					<!-- 当前库存 -->
					<view class="inventory">
						<view>当前库存</view>
						<view><input type="text" value="" placeholder="10000" /></view>
						<view>
							<view>沽清</view>
							<view>置满</view>
						</view>
					</view>

					<!-- 最大库存 -->
					<view class="Largest">
						<view>最大库存</view>
						<input type="text" value="" placeholder="1000" />
					</view>

					<!-- 库存次日置满 -->
					<view class="was">
						<view>
							<view>库存次日置满</view>
							<image src="../../static/management/yiwen.png" mode=""></image>
						</view>
						<view><u-switch v-model="send" @change="change"></u-switch></view>
					</view>

					<!-- 热量 -->
					<view class="heat">
						<view>热量</view>
						<input type="text" value="" />
						<view>kcal/100g</view>
					</view>

					<!-- 重量 -->
					<view class="heat">
						<view style="width: 10%;">重量</view>
						<input placeholder="0" type="text" value="" />
						<view>克</view>
					</view>

					<!-- 条形码 -->
					<view class="Bar">
						<view>条形码</view>
						<input type="text" value="" placeholder="选填" />
					</view>
				</view>
				<view class="nocup" @tap="specifications">
					<image src="../../static/management/xinjian.png" mode=""></image>
					<view>添加多规格</view>
				</view>
			</view>

			<!-- 商品属性 -->
			<view class="Product">商品属性(微辣、去冰、无糖等)</view>
			<view class="attribute">
				<!-- 没有数据 -->
				<view class="nocup" v-if="this.JSONstatus.isAttr == 2">
					<image src="../../static/management/xinjian.png" mode=""></image>
					<view>添加商品</view>
				</view>
				<!-- 循环 -->
				<view v-else class="attribute_one" v-for="(v, i) in attrData" :key="i">
					<view class="one">{{ v.attrName }}</view>
					<view class="two" v-for="(a, b) in JSON.parse(v.attrStr)" :key="b">
						<view>{{ a.name }}</view>
					</view>
				</view>
				<view class="Manage" @tap="Commodity">管理商品属性</view>
			</view>
			<!-- 加料 -->
			<view class="Product">商品加料</view>
			<view class="cup">
				<!-- 没有数据 -->
				<view class="nocup" v-if="this.JSONstatus.isMaterial == 2">
					<image src="../../static/management/xinjian.png" mode=""></image>
					<view>添加商品</view>
				</view>
				<!-- 循环 -->
				<view v-else class="cup_one" v-for="(item, index) in meterData" :key="index">
					<view>
						<view>
							{{ item.materialName }}
							<text>{{ item.SalesPrice }}元</text>
						</view>
						<view>库存 {{ item.SalesStock }}</view>
					</view>
					<view>
						<view>沽清</view>
						<view>置满</view>
					</view>
				</view>
				<view @tap="specifications" class="Manage">管理商品规格</view>
			</view>

			<!-- 售卖时间 -->
			<!-- <view class="Product">售卖时间(默认全时段售卖，可自定义售卖时间)</view> -->
			<!-- 售卖时间列表 -->
			<!-- <view class="DateTime"> -->
			<!-- 没有数据 -->
			<!-- <view class="nocup">
					<image src="../../static/management/xinjian.png" mode=""></image>
					<view>添加售卖时间</view>
				</view> -->
			<!-- <view class="DateTime_one">
					<view>2020-08-17 至 2020-08-31</view>
					<view>每周一、周三、周五、周六</view>
					<view>08:00-12:00、17:00-23:59</view>
				</view>
				<view @tap="Selling" class="Manage">管理售卖时间</view>
			</view> -->

			<!-- 其他信息 -->
			<view class="Product">其他信息</view>

			<!-- 最小购买量 -->
			<view class="Minimum">
				<view>最小购买量</view>
				<input v-model="JSONstatus.maxNum" type="text" value="" />
			</view>
			<!-- 最小单位 -->
			<view class="Minimum">
				<view>最大购买量</view>

				<input v-model="JSONstatus.minNum" type="text" value="" />
			</view>

			<!-- 参加热销排行 -->
			<view class="sales">
				<view>参加热销排行</view>

				<view><u-switch v-model="rankings" @change="change"></u-switch></view>
			</view>
			<view class="sales">
				<view>单点不送</view>

				<view><u-switch v-model="send" @change="change1"></u-switch></view>
			</view>

			<!-- 删除商品 -->
			<view class="dedal">删除该商品</view>

			<!-- 保存 -->
			<view class="login">保存</view>
		</view>

		<!-- 商品特色选择层 -->
		<!-- <u-popup v-model="show" mode="center" length="85%">
			<view class="TimeDate">
				<view>选择商品特色</view>
				<view>支持同时选择多个特殊标签</view>
				<view>
					<u-checkbox-group @change="checkboxGroupChange">
						<u-checkbox active-color="#35394C" @change="checkboxChange" v-model="item.checked" v-for="(item, index) in list" :key="index" :name="item.name">
							{{ item.name }}
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="cancel">
					<view>取消</view>
					<view>确定</view>
				</view>
			</view>
		</u-popup> -->

		<!-- 分类选择 -->
		<!-- <u-select v-model="choice" mode="mutil-column-auto" :list="map" @confirm="confirm"></u-select> -->
	</view>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import { toast } from '@/utils/toast';
import request from '@/utils/request';
import statusBar from '../../components/statusBar/statusBar.vue';
export default {
	data() {
		return {
			zhengmian: '../../static/setup/xiangji.png',
			rankings: false, //热销排行
			send: false, //单点不送
			dishes: [],
			// show: false,
			// choice: false,
			Classification: '',
			list: [
				{
					name: '新品'
				},
				{
					name: '热销'
				},
				{
					name: '招牌菜'
				}
			],
			map: [
				{
					value: 1,
					label: '中国',
					children: [
						{
							value: 3,
							label: '深圳'
						},
						{
							value: 4,
							label: '广州'
						}
					]
				}
			],
			type: '',
			id: '', //商品信息id
			JSONstatus: [],
			specesData: [], //商品规格
			attrData: [], //属性
			meterData: [] //加料
			// attrStr: ''
		};
	},
	components: {
		statusBar
	},
	onLoad(options) {
		this.type = options.type;
		this.id = options.id;
		console.log(this.id, 222);
	},
	created() {
		this.detail();
	},
	methods: {
		detail() {
			let _self = this;
			uni.showLoading({
				title: '加载中',
				duration: 2000
			});

			request('/merchant/food/get-detail', 'POST', {
				id: _self.id
			}).then(res => {
				if (res.data.code == 1) {
					console.log(res.data, 88);
					_self.JSONstatus = res.data.data.foodInfo;
					console.log(_self.JSONstatus, 89999);
					// 规格
					_self.specesData = res.data.data.specesData;

					// 属性
					_self.attrData = res.data.data.attrData;

					// 商品属性里面的数字attrStr
					// _self.attrStr = res.data.data.attrData[0].attrStr
					// var allPrice = [];
					// for (var i = 0; i < res.data.data.attrData.length; i++) {
					// 	var list = {};
					// 	list.name = res.data.data.attrData[i].attrStr;
					// 	allPrice.push(list);
					// 	_self.attrStr = allPrice;
					// 	console.log(_self.attrStr, 8999);
					// }

					if (_self.JSONstatus.aloneType == 1) {
						_self.rankings = true;
					} else {
						_self.rankings = false;
					}
					if (_self.JSONstatus.hotsaleType == 1) {
						_self.send = true;
					} else {
						_self.send = false;
					}

					// 加料
					_self.meterData = res.data.data.meterData;
					// console.log(_self.attrData, 67676);
					setTimeout(() => {
						uni.hideLoading();
					}, 500);
				}
				try {
					_self.JSONstatus = JSON.parse(res.data).data.foodInfo;
					_self.specesData = JSON.parse(res.data).data.specesData;
					_self.attrData = JSON.parse(res.data).data.attrData;
					_self.meterData = JSON.parse(res.data).data.meterData;
				} catch (e) {
					//TODO handle the exception
					_self.JSONstatus = res.data.data.foodInfo;
					_self.specesData = res.data.data.specesData;
					_self.attrData = res.data.data.attrData;
					_self.meterData = res.data.data.meterData;
				}
			});
		},
		leftIndex() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 商品标签
		labels() {
			uni.navigateTo({
				url: '/pages/Management/labels'
			});
		},
		// 商品规格
		specifications() {
			uni.navigateTo({
				url: '/pages/Management/specifications'
			});
		},
		// \商品属性
		Commodity() {
			uni.navigateTo({
				url: '/pages/Management/Commodity'
			});
		},
		// 管理时间
		// Selling(){
		// 	uni.navigateTo({
		// 		url: '/pages/Management/Selling'
		// 	});
		// },
		change(status) {
			console.log(status, 1111);
		},
		change1(status) {
			console.log(status, 1111);
		},
		// characteristics() {
		// 	this.show = true;
		// },
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			console.log(e, 2222999);
			this.dishes = e;
			console.log(this.dishes);
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			console.log(e, 2222999);
			this.dishes = e;
			console.log(this.dishes);
		},
		// handleTap() {
		// 	this.choice = true;
		// },
		confirm(e) {
			this.Classification = e[1].label;
			console.log(this.Classification, 11);
		},
		upload: function() {
			var _this = this;
			uni.chooseImage({
				count: 1,
				quality: 80,
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					console.log(chooseImageRes.tempFiles[0].size);
					_this.zhengmian = tempFilePaths[0];
					// // 2448884
					// if(chooseImageRes.tempFiles[0].size >= 1094377){
					//  toast('超大图片,请于pc端上传认证');
					//  _this.zhengmian = "../../../static/assert/mine/zhengmian@2x.png"
					//  return false
					// }
					// const uploadTask = uni.uploadFile({
					// 	url: 'https://exchangeapi.coinman.club/storage/uploadSingle', //仅为示例，非真实的接口地址
					// 	filePath: tempFilePaths[0],
					// 	name: 'file',
					// 	success: uploadFileRes => {

					// 		if (JSON.parse(uploadFileRes.data).code == 200) {
					// 			toast('上传成功');

					// 			this.front = JSON.parse(uploadFileRes.data).data;
					// 			console.log(this.front, '正面');
					// 			console.log(JSON.parse(uploadFileRes.data).data, 75555);
					// 		} else {
					// 			toast(JSON.parse(uploadFileRes.data).msg);
					// 		}
					// 	},

					// });
				}
			});
		}
	}
};
</script>
<style lang="scss" scoped>
@import './scss/Editor.scss';
</style>
